import {useCallback, useState} from "react";
import {Image, Input, Text, View} from "@tarojs/components";
import EditIcon from "@/assets/imgs/edit.png";
import LikedIcon from "@/assets/imgs/liked.png";
import LikeIcon from "@/assets/imgs/like.png";
import CollectedIcon from "@/assets/imgs/collected.png";
import CollectIcon from "@/assets/imgs/collect.png";
import CommentIcon from "@/assets/imgs/comment.png";
import styles from "./index.module.scss";

interface Props{
  toInput: ()=>void;
  show: boolean;
}

export function BottomOperation (props: Props){
  const [status, setStatus] = useState({
    liked: false,
    collected: false,
  });

  const changeStatus = useCallback((key: keyof typeof status)=>{
    setStatus(_status => {
      const value = !_status[key];
      return {
        ..._status,
        [key]: value
      }
    });
  }, []);

  const changeLike = useCallback(()=>{
    changeStatus('liked');
  }, [changeStatus]);

  const changeCollect = useCallback(()=>{
    changeStatus('collected');
  }, [changeStatus]);

  return (
    <View className={styles.wrapper}>
      <View className={styles.operation} style={{display: props.show ? 'flex' : 'none'}}>
        <View className={styles.inputArea}>
          <Image src={EditIcon} mode='aspectFit' />
          <Input placeholder='说点什么吧...' disabled onClick={props.toInput} />
        </View>
        <View className={styles.btn} onClick={changeLike}>
          <Image src={status.liked ? LikedIcon : LikeIcon} mode='aspectFit' />
          <Text>22</Text>
        </View>
        <View className={styles.btn} onClick={changeCollect}>
          <Image src={status.collected ? CollectedIcon : CollectIcon} mode='aspectFit' />
          <Text>22</Text>
        </View>
        <View className={styles.btn}>
          <Image src={CommentIcon} mode='aspectFit' />
          <Text>22</Text>
        </View>
      </View>
    </View>
  );
}
